<script lang="ts">
export default {
    name: 'tabTwo'
};
</script>

<script setup lang="ts">

const props = defineProps({
    formData: {
        required: true,
        type: Object,
        default: {}
    },
})

const { formData } = props
const emit = defineEmits(['changeTab'])
const dataFormRef = ref(ElForm);

const serviceList = ref<any>([
    {
        label: '无忧退货',
        value: 1,
    },
    {
        label: '快速退款',
        value: 2,
    },
    {
        label: '免费包邮',
        value: 3,
    },
])

const discountList = ref<any>([
    {
        label: '无忧退货',
        value: 1,
    },
    {
        label: '快速退款',
        value: 2,
    },
    {
        label: '免费包邮',
        value: 3,
    },
])


const rules = {
    mobile: [
        {
            required: true,
            message: '手机号码非法',
            trigger: 'blur',
            pattern: /^1\d{10}$/
        }
    ],
    nickName: [{ required: true, message: '请输入账号昵称', trigger: 'blur' }],
    email: [
        {
            required: true,
            message: '请输入联系邮箱',
            trigger: 'blur',
            pattern: /^\w+@\w+\.[a-z]+$/i
        }
    ]
}

const handleChange = (value: any) => {
    console.log(value)
}

function handleSubmitBack() {
    emit('changeTab', 0)
}

/**
 * 表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            emit('changeTab', 2)
        }
    });
}


onMounted(() => {

});
</script>

<template>
    <div class="tab-content">
        <el-form class="form-innner" ref="dataFormRef" :model="formData" :rules="rules" label-width="120px">
            <el-form-item label="赠送积分" prop="protocolPluginId">
                <el-input v-model="formData.protocolPluginId" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="赠送成长值" prop="protocolTransport">
                <el-input-number v-model="formData.num" />克
            </el-form-item>
            <el-form-item label="积分购买限制" prop="protocolTransport">
                <el-input-number v-model="formData.num" />
            </el-form-item>
            <el-form-item label="预告商品" prop="protocolTransport">
                <el-switch v-model="formData.value1" />
            </el-form-item>
            <el-form-item label="商品上架" prop="protocolTransport">
                <el-switch v-model="formData.value1" />
            </el-form-item>
            <el-form-item label="新品推荐" prop="protocolTransport">
                <el-switch v-model="formData.value1" />
            </el-form-item>
            <el-form-item label="商品推荐" prop="protocolTransport">
                <el-switch v-model="formData.value1" />
            </el-form-item>
            <el-form-item label="服务保证" prop="protocolTransport">
                <el-checkbox-group v-model="formData.value2" :min="1" :max="2">
                    <el-checkbox v-for="(item) in serviceList" :key="item.value" :label="item.label" :value="item.value">
                        {{ item.label }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="详细页标题" prop="description">
                <el-input v-model="formData.description" type="textarea" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="详细页描述" prop="protocolPluginId">
                <el-input v-model="formData.protocolPluginId" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="备注" prop="protocolPluginId">
                <el-input v-model="formData.protocolPluginId" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="status" label="选择优惠方式">
                <el-select v-model="formData.status" placeholder="请选择">
                    <el-option v-for="item in discountList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <div class="bottom-box">
                <el-button type="primary" @click="handleSubmitBack">上一步</el-button>
                <el-button type="primary" @click="handleSubmit">下一步</el-button>
            </div>
        </el-form>
    </div>
</template>

<style scoped>
.tab-content {
    width: 100%;
}
</style>

